<template>
  <div class="specialist-com">
    <title-com :title="title"></title-com>
    <swiper :options="swiperOption" class="mt-5">
      <swiper-slide :key="index" v-for="(item,index) in employees">
        <div class="row">
          <div class="col sol-5 col-sm-5 col-md-6 col-lg-6 align-self-end">
            <img class=" mr-3 ml-3" :src="getHeadUrl(item.headImg)"/>
          </div>
          <div class="col col-7 col-sm-7 col-md-6 col-lg-6 moblie-left">
            <div>
              <div class="content">
                <div class="doctor-title">
                  <h1 class="name">{{item.name}}</h1>
                  <span class="over-flow-text" v-text="item.jobTitleLabel"></span>
                </div>
                <div class="list">
                  <div class="list-item">
                    <h3>
                      <span class="icon iconfont icon-icon-"></span>
                      简介
                    </h3>
                    <p class="shanchang over-flow-text">{{item.description}}</p>
                  </div>
                  <!--  <div class="list-item">
                      <h3>学历</h3>
                      <p v-for="e in getArray(item.educationLabel)">{{e}}</p>
                    </div>-->
                  <div class="list-item d-none d-sm-none d-md-block d-lg-block">
                    <h3>
                      <span class="icon iconfont icon-shixunchengji"></span>
                      擅长
                    </h3>
                    <p class="shanchang over-flow-text" v-text="item.skill"></p>
                  </div>
                  <div class="list-item d-none d-sm-none d-md-block d-lg-block">
                    <h3>
                      <span class="icon iconfont icon-suohuorongyu"></span>
                      荣誉
                    </h3>
                    <p class="shanchang over-flow-text" v-text="item.honor"></p>
                  </div>
                </div>
              </div>
              <div class="doctor-button">
                <span @click="goDetail(item)" class="mb-2">医生详情</span>
                <span v-if="false" @click="go(company)">立即预约</span>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>
      <!--箭头-->
      <div class="swiper-button-prev icon iconfont icon-cc-arrow-left-circle" slot="button-prev"></div>
      <div class="swiper-button-next icon iconfont icon-cc-arrow-right-circle" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
  import titleCom from "./titleCom"
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    props: ['title', 'employees', 'company'],
    computed: {},
    data() {
      return {
        swiperOption: {
          slidesPerView: 3,
          breakpoints: {
            //当宽度小于等于480
            1200: {
              slidesPerView: 1
            },
            //当宽度小于等于640
            1930: {
              slidesPerView: 2,
              spaceBetween: 30
            }
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    },
    components: {
      titleCom
    },
    mounted() {

    },
    methods: {
      go(company) {
        if (!this.isNullOrEmpty(company) && !this.isNullOrEmpty(company.qq)) {
          window.open(company.qq);
        }
      },
      goDetail(item) {
        this.$router.push({path: '/zhuanke/' + item.departmentId + '/tuandui/' + item.id})
      }
    }
  }
</script>

<style lang="less">
  @import "~assets/style/public";

  .specialist-com {
    margin-top: 50/@size;
    .swiper-slide {
      background: #F5F6F8;
      margin-right: 0;
    }
    .row {
      img {
        max-width: 262/@size;
        width: 100%;
      }

      .content{
        height: 320/@size;
        padding-right: 20/@size;
      }


      .doctor-title {
        margin-top: 20/@size;
        margin-bottom: 20/@size;
        display: flex;
        span {
          font-family: MicrosoftYaHeiUI;
          font-size: 16/@size;
          color: #444444;
          letter-spacing: 0;
          -webkit-line-clamp:1;
          height:25/@size;
        }
        .name {
          font-size: 20/@size;
          margin-right: 20/@size;
          font-family: MicrosoftYaHeiUI-Bold;
          min-width: 65/@size;
          color: @icon-color;
          font-weight: bold;
        }
      }
      .list {
        .list-item {
          .margin(0, 0, 20, 0);
          .iconfont{
            font-size: 18/@size;
          }
          .icon-suohuorongyu{
            font-size: 20/@size !important;
          }
          h3 {
            color: #666666;
            font-size: 16/@size;
            font-family: MicrosoftYaHeiUI;
          }
          p {
            line-height: 19/@size !important;
            font-size: 16/@size;
            color: #444444;
            font-family: MicrosoftYaHeiUI;
          }
        }

      }
      .doctor-button {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        margin-bottom: 20/@size;
        margin-right: 20/@size;
        span {
          width: 100/@size;
          height: 40/@size;
          line-height: 40/@size;
          text-align: center;
          background: #20A0FF;
          .font-size(14);
          color: #fff;
          cursor: pointer;
          &:last-child {
            background: #13CE66;
          }
        }
      }
    }
    .icon-suohuorongyu {
      font-size: 20/@size !important;
    }
    .shanchang {
      -webkit-line-clamp: 2;
      line-height: 1.6;
    }
    .swiper-button-prev {
      left: 2/@size;
      font-size: 30/@size;
      color: @icon-color;
    }
    .swiper-button-next {
      right: 2/@size;
      font-size: 30/@size;
      color: @icon-color;
    }
  }

  @media (min-width: 320px) and (max-width: 767px) {
    .specialist-com {
      ul{
        li{
          margin: 0;
        }
      }
      .row {
        .moblie-left{
          padding-left: 0;
        }
        img {
          max-width: 262/@size;
          width: 100%;
          margin-right: 0 !important;
        }


        .doctor-title {
          margin-top: 20/@size;
          margin-bottom: 20/@size;
          display: flex;
          flex-direction: column;
          span {
            font-family: @font-first;
            font-size: @font-28;
            color: @black-bb-color;
            letter-spacing: 0;
            -webkit-line-clamp:1;
            height: auto;
            margin-top: 20/@size;
          }
          .name {
            font-size: @font-30;
            margin-right: 20/@size;
            font-family: @font-title;
            min-width: 65/@size;
            color: @black-bb-color;
            margin-top: 15/@size;
          }
        }
        .list {
          .list-item {
            .iconfont{
              font-size:@font-28;
            }
            .icon-suohuorongyu{
              font-size: 28/@size !important;
            }
            h3 {
              font-size: @font-28;
              font-family: @font-first;
              line-height: 28/@size;
            }
            p {
              line-height: 36/@size !important;
              font-size: @font-28;
              color: @black-bb-color;
              font-family: @font-first;
              -webkit-line-clamp:3;
              margin-top: 20/@size;
            }
          }

        }
        .doctor-button {
          span {
            width: 140/@size;
            height: 54/@size;
            line-height: 54/@size;
            .font-size(28);
          }
        }
      }

      .swiper-button-prev {
        font-size: 60/@size;
        left: 4/@size;
      }
      .swiper-button-next {
        font-size: 60/@size;
        right: 8/@size !important;
      }
    }
  }


</style>
